(function () {
    var banner = U.getId('banner')

    var box = banner.querySelector('.img')
    var list = banner.querySelector('.list')
    var str1 = ''
    var str2 = ''

    for (var i = 0; i < bannerData.length; i++) {
        var d = bannerData[i]
        // console.log(d)
        if (i == 0) {
            str1 += `<li class="active"><img src="${d.src}" alt="${d.title}"></li>`
            str2 += `  <li class=""high>${d.title}</li>`
        }
        else {
            str1 += `<li><img src="${d.src}" alt=""></li>`
            str2 += `<li>${d.title}</li>`
        }

    }
    box.innerHTML = str1;
    list.innerHTML = str2;




    var imgLi = banner.querySelectorAll('.img li')
    var pageLi = banner.querySelectorAll('.list li')
    //    console.log(imgLi,pageLi)

    var timer = null;
    var count = 0;


    timer = setInterval(atuo, 2000)
    //划上
    banner.onmouseover = function () {
        clearInterval(timer)
    }
    //划离
    banner.onmouseout = function () {
        timer = setInterval(atuo, 2000)

    }

    //划上分离
    for (var i = 0; i < pageLi.length; i++) {
        pageLi[i].index = i
        pageLi[i].onmouseover = function () {
            count = this.index;
            change();
        }
    }
    function atuo() {
        count++;
        if (count >= pageLi.length) {
            count = 0;
        }
        change()
    }

    function change() {
        for (var i = 0; i < imgLi.length; i++) {
            if (i == count) {
                imgLi[i].style.zIndex = 10;
                U.move(imgLi[i], { opacity: 100 })
                U.addClass(pageLi[i], 'high')

            } else {
                imgLi[i].style.zIndex = 1
                U.move(imgLi[i], { opacity: 0 })
                U.removeClass(pageLi[i], 'high')
            }
        }
    }

})()